<template>
	<a-modal open title="数据同步" @cancel="emits('close')">
		<div class="sync-person-modal-content">
			<p class="title">请从下方的数据同步方式中选择:</p>

			<a-radio-group v-model:value="syncType">
				<a-radio class="sync-radio-item" :value="0">
					<p class="sync-radio-item-title">同步所有数据</p>

					<p class="sync-radio-item-remark">将所有的数据重新下发一次，耗时可能较长</p>
				</a-radio>

				<a-radio class="sync-radio-item" :value="1">
					<p class="sync-radio-item-title">仅同步失败的数据</p>

					<p class="sync-radio-item-remark">仅重新下发未成功同步的数据</p>
				</a-radio>
			</a-radio-group>
		</div>

		<template #footer>
			<a-button key="back" @click="emits('close')">取消</a-button>
			<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import httpServe from '@/global-services';

const props = withDefaults(defineProps<{ boxSerial?: string }>(), {
	boxSerial: '' // 盒子序列号
});

const emits = defineEmits(['close', 'ok']);

const syncType = ref<0 | 1>(0); // 同步类型 0 全部 1 部分

const loading = ref(false);

const handleOk = async () => {
	loading.value = true;
	const form: Record<string, any> = { boxSerial: '', all: syncType.value };
	if (props.boxSerial) {
		form.boxSerial = props.boxSerial;
	}
	const res: any = await httpServe.postHttp('/base/zelo/sync')(form);
	loading.value = false;
	if (res.code === 0) {
		message.success('人员数据同步成功');
		emits('ok');
	} else {
		emits('close');
	}
};
</script>

<style lang="less">
.sync-person-modal-content {
	padding: 24px;

	.title {
		padding-bottom: 24px;
		font-size: 14px;
		color: #fff;
	}

	.ant-radio-group {
		display: flex;
		flex-direction: column;
		gap: 48px;

		.sync-radio-item {
			position: relative;
			border: 0;

			.sync-radio-item-remark {
				position: absolute;
				z-index: 5;
				color: #b0b5c0 !important;
			}
		}
	}
}
</style>
